<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>积分商城</title>
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/weui.css" />
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/goods.css" />

    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/setgoods.css?v=8" />
    <style>
        .harder{
            background: #1AAD19;
            padding:30px 30px 0 30px;
        }
        .conter{
            background:#fff;
            text-align:center;
            border-radius:20px 20px 0 0 ;
            padding:10px;
            color:#1AAD19;
            font-size: 13px;
        }
        .ictext{
            color: #858585;
            font-size:12px;
        }
        .bonus{
            font-size:25px;
        }
        .nav{
            width:100%;
            height: 37px;
            display:flex;
            flex-direction:row;
            background-color:#fff;
        }
        .default{
            text-align:center;
            flex:1;
            margin:10px 10px;

        }
        .red .ictext{
            color:#1AAD19
        }
        .red .row{
            text-align:center;
            flex:1;
            border-bottom:2px solid #1AAD19;
            margin: 10px 10px;

        }
        .card-title{
            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;
        }
        .dhbtn{
            background: #FA8454;
            font-size: 13px;
            padding: 0px 15px;
            display: inline-block;
            line-height: 26px;
            border-radius: 3px;
            margin-top: 5px;
        }
        .box .pic-box .card-logo {
            background: #fff;
            border: 2px solid #ffffff;
            width: 57%;
            height: auto;
        }

        .box .pic-box img {
            display: block;
            width: 100%;
            height: 100%;
            margin: 42px auto;
            border-radius: 4px 4px 0 0;
        }
        .box .box-text {
            padding: 0px 9px 9px 9px;
        }
        a{
            color:#505050;
        }
    </style>
</head>

<body>
<div class="container" id="container">
    <div class="page navbar js_show">
        <div class="page__bd" style="height: 100%;">
            <div class="harder">
                <div class="conter">
                    <p>当前积分</p>
                    <p class="bonus">{$userinfo['bonus']}分</p>
                </div>
            </div>
            <hr style="margin:0px;height:4px;border:0px;color:#D5D5D5;"/>
            <div class="weui-tab">
                <div class="weui-tab__panel">
                    <div class="nav bc_white">
                        <div class="default red" onclick="getcate(this);" data-id="0">
                            <div class="ictext ">全部</div>
                            <div class="row"></div>
                        </div>
                        {volist name="catelist" id="vo"}
                        <div class="default" data-id="{$vo.id}" onclick="getcate(this);">
                            <div class="ictext ">{$vo.name}</div>
                            <div class="row"></div>
                        </div>
                        {/volist}

                    </div>
                    <hr style="margin:0px;height:2px;border:0px;color:#a7a7a7;"/>


                    <div class="list-box" id="list-box" style=" padding-bottom: 30px; ">

                    </div>
                </div>

                <div class="weui-tab__panel" style="display:none;">
                    <div class="weui-panel weui-panel_access">
                        <div class="weui-panel__bd">
                            {volist name="order" id="orvo"}
                            <a href="{:url('carduser/orderinfo', array('id'=>$orvo['id'],'card_id'=>$orvo['card_id']))}" class="weui-media-box weui-media-box_appmsg">
                                <div class="weui-media-box__bd flex2">
                                    <h4 class="weui-media-box__title" style="color:#3e4655;padding: 3px 0">订单:{$orvo.goods_name}</h4>
                                    <p class="weui-media-box__desc" style="padding: 3px 0">{$orvo.create_time}</p>
                                </div>
                                <div class="weui-media-box__bd text-right">-{$orvo.price}积分</div>
                            </a>
                            {/volist}

                        </div>
                    </div>
                </div>
                <div class="weui-navba">
                    <div class="weui-navbar__item weui-bar__item_on">
                        积分兑换
                    </div>
                    <div class="weui-navbar__item">
                        我的记录
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
<script src="__STATIC_URL__/static/js/jquery-2.1.4.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
    wx.config({$share.wxjssdk});
    wx.ready(function(){
        wx.hideAllNonBaseMenuItem();

        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    });
</script>
<script type="text/javascript">
    $(function() {
        $('.weui-navbar__item').on('click', function() {
            var index = $(this).index();
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
            $(".weui-tab__panel").css("display", "none").eq(index).css("display", "block");
        });

    });
</script>
<script>
    function getcate(obj) {

        var cate_id = $(obj).attr("data-id");
        $(obj).addClass("red").siblings().removeClass("red");
        getgooslist(cate_id);
    }
    $(function(){
        getgooslist("0");
    })
    function getgooslist(cate_id) {
        var card_id="{$card['card_id']}";
        $.ajax({

            url: "{:url('cardshoptest/getgoodslist')}",

            data: {
                card_id:card_id,
                cate_id: cate_id
            },

            dataType: "json",

            type: "post",

            success: function (res) {

                if (res.result_code == "SUCCESS") {
                    $(".zanwu").attr("style", "display:none");
                    var data = res.info;

                    var list = "";
                    var  url="/mobile.php?s=/cardshop/orderadd";
                    for (var i = 0; i < data.length; i++) {

                        list += '  <div class="box">\n' +
                            '  <a href="'+url+'/id/'+data[i].id+'/card_id/'+data[i].card_id+'.html" >\n' +
                            '                                <div class="pic-box" style="">\n' +
                            '                                    <img class="card-logo" src="'+data[i].img_url+'">\n' +
                            '\n' +
                            '                                </div>\n' +
                            '                                <div class="box-text">\n' +
                            '\n' +
                            '                                    <p class="card-title">'+data[i].goods_name+'</p>\n' +
                            '                                    <p class="box-title box-title-name"></p>\n' +
                            '                                    <p class="box-title box-title-detail">\n' +
                            '                                        <span class="detail-integral">'+data[i].goods_price+'积分</span>\n' +
                            '                                    </p>\n' +
                            '                                    <a href="'+url+'/id/'+data[i].id+'/card_id/'+data[i].card_id+'.html" class="weui-btn dhbtn">\n' +
                            '                                        超值兑换\n' +
                            '                                    </a>\n' +
                            '                                </div>\n' +
                            '                        </a> \n' +
                            '                        </div>';

                    }

                    $("#list-box").html(list);

                } else {
                    if (res.result_code == "FAIL") {
                        $(".zanwu").attr("style", "display:block");
                        $("#list-box").html("");
                    }
                }


            }

        })
    }
</script>
</html>